<template>
  <div class="hello">
    <h1>{{ corsMsg }}</h1>
    <button @click="corsApi">GET-跨域</button>
    <hr />

    <h1>{{ corsBackend }}</h1>
    <button @click="backendApi">接口处理跨域</button>
    <hr />

    <h1>{{ corsProxy }}</h1>
    <button @click="proxyApi">代理处理跨域</button>
    <hr />

    <input type="text" v-model="postValue" />
    <button>POST</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      corsMsg: '跨域了！',
      corsBackend: '接口处理OK吗',
      corsProxy: '代理处理OK吗？',
      postValue: ''
    }
  },
  methods: {
    postApi () {

    },
    corsApi () {
      axios.get('http://192.168.40.25:3000/corsApi').then(res => {
        this.corsMsg = res.data
      })

    },
    backendApi () {
      axios.get('http://192.168.40.25:3000/backendApi').then(res => {
        this.corsBackend = res.data
      })
    },
    proxyApi () {
      axios.get('/api/proxyApi').then(res => {
        this.corsProxy = res.data
      })
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
